<template>
    <rx-dialog class="m-sign-select-box" :options="options" @close="close" @confirm="confirm">
        <RxEmptyList v-if="signatureList.length === 0"></RxEmptyList>
        <div class="m-seal-img-box" v-else>
            <template v-for="item of signatureList">
                <div class="m-seal-img-item" @click="selectItem(item.fileId)"
                     :class="{'img-box-active':selectSign === item.fileId}"
                >
                    <div class="m-sign-del" @click="del(item)">
                        <span class="m-sign-del-icon">x</span>
                    </div>
                    <div class="img-box" >
                        <div class="radio-box">
                            <radio :checked="selectSign === item.fileId" style="transform:scale(0.7)" />
                        </div>
                        <image class="list-img" :src="getPath(item)"/>
                    </div>
                </div>
            </template>
        </div>
    </rx-dialog>
</template>

<script>
import { FormApi } from "@/api/FormApi.js";
import RxDialog from '@/components/RxDialog.vue'
import TokenUtil from '@/common/TokenUtil.js'
import RxEmptyList from "@/components/RxEmptyList.vue"
export default {
    name: "MSignSelectDialog",
    components:{
        RxDialog,
        RxEmptyList
    },
    props:{
        dialogClose:{}
    },
    data(){
        return {
            signatureList:[],
            selectSign:'',
            options:{
                title:this.i18n('signature','签名')
            },
            eventName:''
        }
    },
    onLoad(params) {
        let openUserParams = uni.getStorageSync('MSignSelectDialog')
        this.eventName = openUserParams.eventName;
        this.getSignatureList();
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        del(signature) {
            let self = this;
            uni.showModal({
                title:this.i18n('prompt','提示'),
                content:this.i18n('deleteSelected','您确定需要删除选中的记录吗?'),
                success: function (res) {
                    if (res.confirm) {
                        FormApi.delSignature(signature.id).then(res => {
                            if (res.success) {
                                self.getSignatureList();
                            }
                        });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            })
        },
        selectItem(fileId){
            this.selectSign = fileId ;
        },
        getSignatureList() {
            let self = this;
            FormApi.getSignatureList().then(res => {
                self.signatureList = res;
            });
        },
        getPath(file) {
            let fileId = file.fileId;
            let token = TokenUtil.getToken();
            let url =  this.realUrl() +`/api-system/system/core/sysFile/previewFile?fileId=${fileId}&accessToken=` + token;
            return url;
        },
        confirm() {
            //确定
                if (!this.selectSign) {
                    this.$message.warning(this.i18n('PleaseSelectSignature','请选择签名!'));
                    return
                }
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName, self.selectSign)
                }
            })
        },
        close() {
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName,'')
                }
            })
        },
    }
}
</script>

<style scoped>
.m-sign-del{
    position: absolute;
    top: 0;
    right: 0;
    color: #e64340;
    z-index: 19;
    display: none;
}
.img-box-active .m-sign-del{
    display: inline-flex;
}
.m-sign-del-icon{
    display: inline-flex;
    padding: .1rem .4rem;
}
.radio-box{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

.no-data{
    margin:10% auto 0;
    max-width: 30%;
}
.no-data image{
    width: 100%;
    object-fit: cover;
}
.m-sign-select-box{
    --ImgCount:3
}
.m-seal-img-box{
    width: calc(100% - 1.2rem);
    display: grid;
    grid-template-columns: repeat(var(--ImgCount),1fr);
    gap: .4rem;
}
.m-seal-img-item{
    height: 1rem;
    padding-bottom: 100%;
    position: relative;
}
.img-box{
    position: absolute;
    inset: 0;
    border: 1px solid #ddd;
    border-radius: .4rem;
    height: 100%;
    width: 100%;
}
.img-box-active .img-box{
    border-color: #007aff;
}
.list-img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border: 0;
    pointer-events: none;
}
.img-box::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: .4rem;
}
/*大于1600*/
@media all and (min-width : 1600px){

}
/*大于1200 */
@media all and (min-width : 1200px){

}
/*!*大于992 *!
@media all and (min-width : 992px){

}*/
/*大于768  ipad*/
@media all and (min-width : 768px){
    .m-seal-dialog-box{
        --ImgCount:4
    }
}
/*大于576 - 小于768*/
@media all and (min-width : 576px){

}
/*小于576*/
@media all and (max-width : 576px){

}
</style>
